import React, { Suspense } from 'react'
import styles from "./index.module.scss"
import { Button, Image, ProgressBar, Skeleton } from "antd-mobile";
import { Await, useAsyncValue, useLoaderData } from 'react-router-dom';

type Props = {}

export default function index({}: Props) {
  const loaderData = useLoaderData()
  return (
    <Suspense fallback={
      <>
        <Skeleton.Title animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated /></>
    }>
      <Await children={<Child />} resolve={(loaderData as any).quickData()}></Await>
    </Suspense>
  )
}
function Child(){
  const quickData = useAsyncValue() as RootObject
  return (
    <div className={styles.qd_quick_page}>
    {/* 练习列表 */}
    <div className="qd_practice_area">
     {quickData.records.map((item: any) => {
       return (
         <div className="qd_practice_list" key={item.id}>
           <div className="qd_practice_list_left">
             <Image src="./images/home/subject.png" fit="fill" />
           </div>
           <div className="qd_practice_list_conter">
             <div className="qd_practice_list_conter_title">
               {item.title}
             </div>
           </div>
           <div className="qd_practice_list_right">
             <Button color="primary" fill="solid" >
               刷题
             </Button>
           </div>
         </div>
       );
     })}
   </div>
 </div>
  )
}

interface RootObject {
  records: Record[];
  total: number;
  size: number;
  current: number;
  orders: any[];
  hitCount: boolean;
  searchCount: boolean;
  pages: number;
}

interface Record {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
}